<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/css/userRegister.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <!--1、首先：引入jQuery的js文件-->
    <script src="/js/jquery-3.4.1.min.js"></script>
    <!--2、外链式：再引入自己写的js文件-->
    <script src="/js/userRegister.js"></script>
</head>

<body>
<div class="left"></div>

<form class="" action="" lay-filter="form1">
    <div class="content">
        <div class="line">
            <img src="/img/logo.jpg" alt="" id="logo" name="logo"/>
        </div>
        <div class="line">
            <h1>[[${tel}]]</h1>
        </div>
        <div class="line">
            <div class="line_left">
                <label for="cname">用户名称</label>
            </div>
            <div class="line_right">
                <input type="text" name="memberName" id="cname" autocomplete="off" placeholder="输入用户名称"/>
                <!--onblur事件：文本框失去焦点-->
            </div>
        </div>
        <div class="line">
            <div class="line_left">
                <label for="cpassword">密码</label>
            </div>
            <div class="line_right">
                <input type="password" name="password" id="cpassword" autocomplete="off" placeholder="输入用户密码"/>
            </div>
        </div>
        <div class="line">
            <div class="line_left">
                <label for="cpassword2">确认密码</label>
            </div>
            <div class="line_right">
                <input type="password" name="cpassword2" id="cpassword2" autocomplete="off" placeholder="输入确认密码"/>
                <!-- 放置一个隐藏框用来放传过来的电话号码 -->
                <input type="hidden" name="tel" id="memberTel" placeholder="确认电话号码" th:value="${tel}"/>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="line">
            <div class="line_left">
                <label for="province">配送地址</label>
            </div>
            <div class="line_peisong">
                <select name="province" id="province" onchange="jiaZaiCity()">
                    <option value="1">北京</option>
                    <option value="2">四川</option>
                    <option value="1">广东</option>
                </select>
            </div>
            <div class="line_peisong">
                <select name="city" id="city">
                    <option value="1">海淀</option>
                    <option value="2">东城</option>
                    <option value="1">西城</option>
                </select>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="line">
            <div class="line_left">
                <label for="sex">性别</label>
            </div>
            <div class="line_right radio_left">
                <input type="radio" name="sex" id="sex" value="0"/>男
                <input type="radio" name="sex" id="sex" value="1"/>女
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="line">
            <div class="line_left">
                <label for="peisongDate">配送时间</label>
            </div>
            <div class="line_right radio_left">
                <input type="checkbox" name="peisongDate" id="peisongDate" value="0" alt="1"/>周末
                <input type="checkbox" name="peisongDate" id="peisongDate" value="1" alt="1"/>节假日
                <input type="checkbox" name="peisongDate" id="peisongDate" value="2" alt="1"/>工作日
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="line">
            <div class="line_left">
                <label for="protocol">同意协议</label>
            </div>
            <div class="line_right radio_left">
                <input type="checkbox" name="protocol" id="protocol" value="1" alt="0"
                       onclick="chkValue()"/>
                <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                    <ins>用户协议</ins>
                </a>
            </div>
        </div>
        <div class="line">
            <h5 id="msg" name="msg">验证结果</h5>
        </div>
        <div class="layui-form-item">
            <input class="layui-btn layui-btn-fluid" lay-submit id="saveBtn" value="注册">
        </div>
    </div>
</form>

<div class="left"></div>

<script src="/js/common.js"></script>
<script src="/layui/layui.js" charset="utf-8"></script>
<script th:inline="none">
    layui.use(['form','layer','util'], function(tel) {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;


        // 各种判断条件
        // 1.
        // 2.
        // 3.

        //给保存按钮绑事件
        $("body").on("click", "#saveBtn", function () {
            //获取表单中的所有数据 lay-filter="form1"
            var data = form.val("form1");
            //打印一下
            console.log(data);
            //判断属性是不是都填上了
            if (!data.memberName) {
                layer.msg("用户名不能为空")
                return false;
            }
            if (!data.password) {
                layer.msg("密码不能为空")
                return false;
            }
            if (!data.cpassword2) {
                layer.msg("请重新输入密码")
                return false
            }
            //把数据传到后台 Ajax异步请求
            //只有请求成功了，才进function！！！
            $.post("/member/finalRegister", data, function () {
                //关窗口
                layer.closeAll();
                //给成功提示
                layer.msg("保存成功");
                //再查一遍表格的数据（点一下查询按钮）
                $("#searchBtn").click();
            });
        });

    });



</script>

</body>
</html>